<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Set and Get Properties</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Set and Get Properties</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><link href="../assets/node/node.css" rel="stylesheet" type="text/css">
<div class="intro">
    <p>This example demonstrates how to retrieve and use a <code>Node</code> instance and access DOM properties.</p>
    <p>Press the button to get or set the <code>FORM</code>'s <code>offsetWidth</code>.</p>
</div>

<div class="example">
<form id="demo" action="#">
    <label>Width:</label>
    <input name="width" size="2">
    <input type="submit" value="Run">
</form>

<script type="text/javascript">
YUI().use('node', function(Y) {
    var form = Y.one('#demo'),
        input = Y.one('#demo input[name=width]'),
        button = Y.one('#demo input[type=submit]');

    form.on('submit', function(e) {
       e.preventDefault(); // keep the form from submitting

       var value = input.get('value'),
            width = form.get('offsetWidth');

       if (value == '') {
           input.set('value', width);
       } else if (!isNaN(parseInt(value))) {
            form.set('offsetWidth', value);
       }
    });
});
</script>

</div>

<h2>Setting up the HTML</h2>

<pre class="code prettyprint">&lt;form id=&quot;demo&quot; action=&quot;#&quot;&gt;
    &lt;label&gt;How wide is this form?&lt;&#x2F;label&gt;
    &lt;input name=&quot;width&quot; size=&quot;2&quot;&gt;
    &lt;input type=&quot;submit&quot; value=&quot;Show Me&quot;&gt;
&lt;&#x2F;form&gt;</pre>


<h2>Getting a Node Instance</h2>
<p>The <code>Y.one</code> method accepts a Selector or HTML element and returns a Node instance.  Let's go ahead and set up some variables for the node's representing our HTML.</p>

<pre class="code prettyprint">var form = Y.one(&#x27;#demo&#x27;),
    input = Y.one(&#x27;#demo input[name=width]&#x27;),
    button = Y.one(&#x27;#demo input[type=submit]&#x27;);</pre>


<h2>Accessing Node Properties</h2>
<p>The properties of a node can be accessed via its <code>set</code> and <code>get</code> methods.</p>
<p>In most cases, simple type of properties (strings, numbers, booleans) pass directly to/from the underlying DOM node, however properties representing other DOM nodes return <code>Node</code> or <code>NodeList</code> instances.</p>

<h3>The Get Method</h3>
<p>We can use the <code>get</code> method to read the <code>FORM</code> element's offsetWidth, which includes the style width, padding, and border.</p>

<pre class="code prettyprint">width = form.get(&#x27;offsetWidth&#x27;);</pre>


<h3>The Set Method</h3>
<p>The <code>set</code> method allows us to update the value of the <code>INPUT</code> element with the value of the <code>FORM</code>'s <code>offsetWidth</code> property.</p>

<pre class="code prettyprint">input.set(&#x27;value&#x27;, width);</pre>


<h3>Setting the Offset Width</h3>
<p>The <code>offsetWidth</code> property of an HTML element is read only, however YUI makes this writeable as well.  This assures that the final <code>offsetWidth</code> matches the value that is set, regardless of borders, padding, or box model.</p>

<pre class="code prettyprint">form.set(&#x27;offsetWidth&#x27;, value);</pre>


<h2>Listening for Node Events</h2>
<p>We will update the value of the <code>INPUT</code> when the <code>BUTTON</code> is pressed. The <code>FORM</code>'s default action can be suppressed using the incoming Event object's <code>preventDefault()</code> method.</p>

<pre class="code prettyprint">button.on(&#x27;click&#x27;, function(e) {
    e.preventDefault();
};</pre>


<h2>Complete Example Source</h2>
<pre class="code prettyprint">&lt;form id=&quot;demo&quot; action=&quot;#&quot;&gt;
    &lt;label&gt;Width:&lt;&#x2F;label&gt;
    &lt;input name=&quot;width&quot; size=&quot;2&quot;&gt;
    &lt;input type=&quot;submit&quot; value=&quot;Run&quot;&gt;
&lt;&#x2F;form&gt;

&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
YUI().use(&#x27;node&#x27;, function(Y) {
    var form = Y.one(&#x27;#demo&#x27;),
        input = Y.one(&#x27;#demo input[name=width]&#x27;),
        button = Y.one(&#x27;#demo input[type=submit]&#x27;);

    form.on(&#x27;submit&#x27;, function(e) {
       e.preventDefault(); &#x2F;&#x2F; keep the form from submitting

       var value = input.get(&#x27;value&#x27;),
            width = form.get(&#x27;offsetWidth&#x27;);

       if (value == &#x27;&#x27;) {
           input.set(&#x27;value&#x27;, width);
       } else if (!isNaN(parseInt(value))) {
            form.set(&#x27;offsetWidth&#x27;, value);
       }
    });
});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Using selectors and property accessors with Node.">
                                        <a href="properties.html">Set and Get Properties</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using DOM methods with Node.">
                                        <a href="dom-node.html">DOM Methods</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Listening for DOM events with Node instances.">
                                        <a href="events.html">Handling DOM Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="NodeList provides Node functionality for multiple nodes.">
                                        <a href="nodelist.html">NodeList</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using a single event listener to handle events on multiple nodes.">
                                        <a href="node-evt-delegation.html">Delegating Node Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example demonstrates how to position an element in page coordinates.">
                                        <a href="node-xy.html">Node Positioning</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example demonstrates how to set styles and get style information.">
                                        <a href="node-style.html">Node Styling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example demonstrates how to insert content into a Node.">
                                        <a href="node-insert.html">Adding Node Content</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example demonstrates how to show and hide a Node.">
                                        <a href="node-view.html">Showing and Hiding</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Use the Event Utility to attach simple DOM event handlers.">
                                        <a href="../event/basic-example.html">Simple DOM Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating an accessible toolbar using the Focus Manager Node Plugin and Node&#x27;s support for the WAI-ARIA Roles and States.">
                                        <a href="../node-focusmanager/node-focusmanager-1.html">Accessible Toolbar</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event&#x27;s delegation support and mouseenter event, along with the Overlay widget and Node&#x27;s support for the WAI-ARIA Roles and States.">
                                        <a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use IO to request XML data from a remote web service.">
                                        <a href="../io/weather.html">Request XML data from Yahoo! Weather</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.">
                                        <a href="../io/xdr.html">Request JSON using Yahoo! Pipes</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Example Photo Browser application.">
                                        <a href="../dd/photo-browser.html">Photo Browser</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
                                        <a href="../dd/portal-drag.html">Portal Style Example</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
